<template>
  <div>
    <!-- 头部：LOGO 搜索 打开APP -->
    <XmlyHeader />

    <!-- 内容：一级、二级分类及详情列表 -->
    <div class="rankpage-item">
      <!-- 头部：一级分类列表 -->
      <van-tabs
        v-model="active"
        color="#f06742"
        line-width="18px"
        line-height="3px"
        title-inactive-color="#72727b"
        title-active-color="#40404c"
        @click="getCategoryList"
      >
        <van-tab
          v-for="(item, index) in tabList"
          :title="item.name"
          :key="index"
          :title-style="{ fontSize: active === index ? '18px' : '' }"
        >
          <div class="rank-content">
            <!-- 内容：侧边导航栏 -->
            <van-sidebar v-model="activeKey">
              <van-sidebar-item
                v-for="nav in item.tabWraps"
                :key="nav.index"
                :title="nav.name"
                @click="getDetailList(nav.rankingId)"
              ></van-sidebar-item>
            </van-sidebar>

            <!-- 内容：导航栏详情 -->
            <div class="rank-detail">
              <div
                class="rank-list"
                v-for="(item, index) in DetailList"
                :key="index"
              >
                <div class="number-img">
                  <div v-if="index === 0" class="rank-img">
                    <img src="@/assets/images/one.png" />
                  </div>
                  <div v-if="index === 1" class="rank-img">
                    <img src="@/assets/images/two.png" />
                  </div>
                  <div v-if="index === 2" class="rank-img">
                    <img src="@/assets/images/three.png" />
                  </div>
                  <div v-if="index > 2" class="rank-number">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="rank-img-content">
                    <img
                      :src="
                        '//imagev2.xmcdn.com/' +
                        item.cover +
                        '!op_type=3&columns=144&rows=144&magick=webp'
                      "
                    />
                  </div>
                </div>
                <div>
                  <h3>{{ item.albumTitle }}</h3>
                  <p>{{ item.salePoint }}</p>
                  <div class="rank-play">
                    <img src="@/assets/images/play.png" />
                    <span>{{ bigNumTransform(item.playCount) }}</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="@/assets/images/voice.png" />
                    <span>{{ bigNumTransform(item.trackCount) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import XmlyHeader from "@/components/XmlyHeader";
  import { getRankCategoryApi } from "@/api/components";
  import { getRankListApi } from "@/api/rank";

  export default {
    name: "rank",
    XmlyHeader,
    data() {
      return {
        active: "",
        activeKey: 0,
        tabList: [],
        DetailList: [],
      };
    },

    mounted() {
      // 请求rank头部一级、二级分类的数据
      this.getTabList();
      // 请求排行榜详情的数据
      this.getDetailList(100006);
    },

    methods: {
      // 请求rank头部一级、二级分类的数据
      async getTabList() {
        const result = await getRankCategoryApi();
        this.tabList = result.data.tabLists;
      },

      // 点击排行榜二级分类请求的详情数据
      async getDetailList(rankId) {
        const result = await getRankListApi(rankId);
        console.log(result, "请求排行榜详情的数据");
        this.DetailList = result.data.rankList[0].albums;
      },

      // 点击排行榜一级分类请求的详情数据
      getCategoryList(categoryOneIndex) {
        this.getDetailList(
          this.tabList[categoryOneIndex].tabWraps[0].rankingId,
          (this.activeKey = 0)
        );
      },

      // 封装处理大数字转万/亿写法的函数
      bigNumTransform(num) {
        var res = "";
        if (num > 100000000) {
          res = (num / 100000000).toFixed(2) + "亿";
        } else if (num > 10000) {
          res = (num / 10000).toFixed(2) + "万";
        } else {
          res = num + "";
        }
        return res;
      },
    },
  };
</script>

<style>
  .rankpage-item {
    width: 100%;
  }
  .rank-content {
    display: flex;
    width: 100%;
  }
  .rank-detail {
    width: 100%;
    overflow: scroll;
    width: 100%;
    height: 100vh;
  }
  .rank-detail::-webkit-scrollbar {
    display: none;
  }
  .rank-list {
    display: flex;
    border-bottom: thin solid #e8e8e8;
    margin-bottom: 15px;
  }
  .rank-list h3 {
    font-size: 16px;
    font-weight: normal;
    color: #000000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: 0px 15px 0px 15px;
  }
  .rank-list p {
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #999999;
    margin: 10px 15px 0px 15px;
    height: 34px;
  }
  .rank-list span {
    font-size: 12px;
    color: #999999;
    line-height: 26px;
  }
  .rank-img {
    width: 34px;
    text-align: center;
  }
  .rank-img-content img {
    width: 93px;
    height: 93px;
    border-radius: 10px;
  }
  .rank-number {
    width: 34px;
  }
  .rank-number span {
    display: flex;
    color: #40404c;
    font-size: 16px;
    justify-content: center;
    font-weight: 600;
  }

  .number-img {
    display: flex;
  }
  .rank-play {
    display: flex;
    align-items: center;
    margin: 0px 0px 0px 15px;
  }
  .rank-play img {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
  }
</style>
